<template>
  <el-card>
    <el-table class="elTable" :data="skuArr" border stripe>
      <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
      <el-table-column prop="skuName" label="名称" align="center"></el-table-column>
      <el-table-column prop="skuDesc" label="描述" align="center"></el-table-column>
      <el-table-column prop="skuDefaultImg" label="默认图片" align="center" width="150">
        <template #default="{ row, $index }">
          <img class="defaultImg" :src="row.skuDefaultImg" />
        </template>
      </el-table-column>
      <el-table-column prop="weight" label="重量(g)" align="center" width="100"></el-table-column>
      <el-table-column prop="price" label="价格(元)" align="center" width="100"></el-table-column>
      <el-table-column label="操作" width="180" fixed="right" align="center">
        <template #default="{ row, $index }">
          <el-button type="primary" circle :icon="row.isSale === 0 ? 'Top' : 'Bottom'" size="small" @click="updateSale(row)"></el-button>
          <el-button type="warning" circle icon="Edit" size="small" @click="updateSku"></el-button>
          <el-button type="info" circle icon="InfoFilled" size="small" @click="skuInfoHandler(row)"></el-button>
          <el-button type="danger" circle icon="Delete" size="small" @click="DeleteSku(row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="pageNo"
      v-model:page-size="limit"
      :page-sizes="[5, 10, 20, 50, 100, 200]"
      layout=" prev, pager, next, jumper, ->, total, sizes,"
      :total="total"
      :background="true"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>

  <el-drawer v-model="showDrawer">
    <template #header>
      <h4>查看商品信息</h4>
    </template>
    <template #default>
      <div class="sku-info">
        <div class="sku-prop">
          <p>名称</p>
          <p>{{ skuInfo?.skuName }}</p>
        </div>
        <div class="sku-prop">
          <p>描述</p>
          <p>{{ skuInfo?.skuDesc }}</p>
        </div>
        <div class="sku-prop">
          <p>价格</p>
          <p>{{ skuInfo?.price }}</p>
        </div>
        <div class="sku-prop">
          <p>平台属性</p>
          <div>
            <el-tag class="elTag" type="primary" v-for="item in skuInfo?.skuAttrValueList" :key="item.id">{{ item.valueName }}</el-tag>
          </div>
        </div>
        <div class="sku-prop">
          <p>销售属性</p>
          <div>
            <el-tag class="elTag" type="primary" v-for="item in skuInfo?.skuSaleAttrValueList" :key="item.id">{{ item.saleAttrValueName }}</el-tag>
          </div>
        </div>
        <div class="sku-prop">
          <p>商品图片</p>
          <el-carousel indicator-position="outside">
            <el-carousel-item v-for="item in skuInfo?.skuImageList" :key="item.id">
              <img class="elCarouselImg" :src="item.imgUrl" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { SkuData, SkuInfoData, SkuResponseData } from '@/api/product/sku/types';
import { ElMessageBox } from 'element-plus';
// 当前页
const pageNo = ref<number>(1);
//页面大小
const limit = ref<number>(5);
// 数据总数
const total = ref<number>(0);
// 商品数组
const skuArr = ref<SkuData[]>([]);
// 商品详情
const skuInfo = ref<any>();
// 是否显示商品详情页
const showDrawer = ref<boolean>(false);

onMounted(() => {
  getSku();
});
//加载sku数据
const getSku = async (pager = 1) => {
  pageNo.value = pager;
  const result: SkuResponseData = await reqGetSku(pageNo.value, limit.value);
  if (result.code === 200) {
    skuArr.value = result.data.records;
    total.value = result.data.total;
  }
};
// 页面大小改变触发
const handleSizeChange = () => {
  getSku();
};
// 页码改变触发
const handleCurrentChange = () => {
  getSku(pageNo.value);
};
// 上架商品
const updateSale = async (row: SkuData) => {
  if (row.isSale === 0) {
    const result: any = await reqSkuTopSale(row.spuId as number);
    if (result.code === 200) {
      ElMessage.success('上架成功');
      getSku(pageNo.value);
    } else {
      ElMessage.error('上架失败');
    }
  } else {
    const result: any = await reqSkuTopSale(row.spuId as number);
    if (result.code === 200) {
      ElMessage.success('下架成功');
      getSku(pageNo.value);
    } else {
      ElMessage.error('下架失败');
    }
  }
};
// 更新商品
const updateSku = () => {
  ElMessage.success('努力更新中~~~');
};
// 查看商品详情
const skuInfoHandler = async (row: SkuData) => {
  const result: SkuInfoData = await reqGetSkuInfo(row.id as number);
  if (result.code === 200) {
    skuInfo.value = result.data;
    showDrawer.value = true;
  }
};
// 删除商品
const DeleteSku = (row: SkuData) => {
  ElMessageBox.confirm(`确定要删除【${row.skuName}】这个商品吗`, { title: '提示' })
    .then(async () => {
      const result: any = await reqDeleteSku(row.id as number);
      if (result.code === 200) {
        ElMessage.success('删除成功');
      } else {
        ElMessage.error('删除失败');
      }
    })
    .catch(() => {
      ElMessage.warning('已取消删除');
    });
};
</script>

<style lang="scss" scoped>
.elTable {
  margin-bottom: 10px;
  height: calc(100vh - $base-tabbar-height - 104px);

  .defaultImg {
    width: 100%;
    height: 100%;
  }
}
.sku-info {
  .sku-prop {
    display: grid;
    grid-template-columns: 1fr 2fr;
    margin: 15px;
    .elTag {
      margin: 3px;
    }
    .elCarouselImg {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
